<template>
  <div class="media-center">
    <!-- 顶部静态图片 -->
    <div class="static-banner" v-if="carouselData.length > 0">
      <div class="banner-item">
        <img :src="carouselData[0].image" alt="banner" class="banner-img">
        <div class="banner-overlay">
          <div class="container">
            <div class="banner-content">
              <h1 class="banner-title">{{ carouselData[0].title }}</h1>
              <p class="banner-subtitle" v-if="carouselData[0].subtitle">{{ carouselData[0].subtitle }}</p>
              <p class="banner-description" v-if="carouselData[0].description">{{ carouselData[0].description }}</p>
              <el-button 
                v-if="carouselData[0].buttonText" 
                type="primary" 
                size="large"
                @click="handleCarouselAction(carouselData[0].action)"
              >
                {{ carouselData[0].buttonText }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页面标题（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">{{ pageData.title || '媒体中心' }}</h1>
        <p class="page-subtitle">{{ pageData.subtitle || '获取最新的展会资讯和媒体报道' }}</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="media-nav">
          <a @click="setActiveTab('exhibition-news')" 
             :class="['nav-item', { active: activeTab === 'exhibition-news' }]">展会资讯</a>
          <a @click="setActiveTab('media-reports')" 
             :class="['nav-item', { active: activeTab === 'media-reports' }]">媒体报道</a>
          <a @click="setActiveTab('industry-news')" 
             :class="['nav-item', { active: activeTab === 'industry-news' }]">行业新闻</a>
          <a @click="setActiveTab('highlights')" 
             :class="['nav-item', { active: activeTab === 'highlights' }]">精彩集锦</a>
          <a @click="setActiveTab('cooperative-media')" 
             :class="['nav-item', { active: activeTab === 'cooperative-media' }]">合作媒体</a>
          <a @click="setActiveTab('media-registration')" 
             :class="['nav-item', { active: activeTab === 'media-registration' }]">媒体注册</a>
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 展会资讯 -->
      <section id="exhibition-news" class="media-section" v-if="activeTab === 'exhibition-news'">
        <h2 class="section-title">展会资讯</h2>
        <div class="news-grid">
          <div class="news-card" v-for="news in exhibitionNews" :key="news.id" @click="viewNewsDetail(news.id)">
            <div class="news-image">
              <img :src="news.image" :alt="news.title">
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-excerpt">{{ news.excerpt }}</p>
              <div class="news-meta">
                <span class="news-date">{{ news.date }}</span>
                <span class="news-category">{{ news.category }}</span>
              </div>
              <!-- 查看详情按钮 -->
              <div class="news-actions">
                <el-button 
                  type="primary" 
                  size="small" 
                  @click.stop="viewNewsDetail(news.id)"
                >
                  <el-icon><View /></el-icon>
                  查看详情
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 媒体报道 -->
      <section id="media-reports" class="media-section" v-if="activeTab === 'media-reports'">
        <h2 class="section-title">媒体报道</h2>
        <div class="media-reports">
          <div class="report-card" v-for="report in mediaReports" :key="report.id">
            <div class="report-image">
              <img :src="report.image" :alt="report.title">
            </div>
            <div class="report-content">
              <h3 class="report-title">{{ report.title }}</h3>
              <p class="report-source">{{ report.source }}</p>
              <p class="report-excerpt">{{ report.excerpt }}</p>
              <a :href="report.link" class="report-link" target="_blank">阅读全文</a>
            </div>
          </div>
        </div>
      </section>

      <!-- 行业资讯 -->
      <section id="industry-news" class="media-section" v-if="activeTab === 'industry-news'">
        <h2 class="section-title">行业资讯</h2>
        <div class="industry-news">
          <div class="news-item" v-for="news in industryNews" :key="news.id">
            <div class="news-image">
              <img :src="news.image" :alt="news.title">
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-excerpt">{{ news.excerpt }}</p>
              <div class="news-meta">
                <span class="news-date">{{ news.date }}</span>
                <span class="news-category">{{ news.category }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 现场集锦 -->
      <section id="on-site-highlights" class="media-section" v-if="activeTab === 'highlights'">
        <h2 class="section-title">现场集锦</h2>
        <div class="highlights-grid">
          <div class="highlight-card" v-for="highlight in highlightsData" :key="highlight.id">
            <div class="highlight-image">
              <img :src="highlight.image" :alt="highlight.title">
            </div>
            <div class="highlight-content">
              <h3 class="highlight-title">{{ highlight.title }}</h3>
              <div v-html="highlight.description" class="highlight-description"></div>
              <div class="highlight-meta">
                <span class="highlight-date">{{ highlight.date }}</span>
                <span class="highlight-type">{{ highlight.type }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 合作媒体 -->
      <section id="cooperative-media" class="media-section" v-if="activeTab === 'cooperative-media'">
        <h2 class="section-title">合作媒体</h2>
        <div class="cooperative-media">
          <div class="media-item" v-for="media in cooperativeMedia" :key="media.id">
            <!-- 图片在上 -->
            <div class="media-image-section" v-if="media.logo">
              <img :src="media.logo" :alt="media.name" class="media-image">
            </div>
            <!-- 文本在下 -->
            <div class="media-content">
              <h3 class="media-title">{{ media.name }}</h3>
              <div v-if="media.description" class="media-description" v-html="media.description"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 媒体注册 -->
      <section id="media-registration" class="media-section" v-if="activeTab === 'media-registration'">
        <h2 class="section-title">媒体注册</h2>
        <div class="media-registration">
          <div class="registration-info">
            <h3>媒体服务</h3>
            <p>我们为媒体朋友提供专业的展会报道支持和服务，包括新闻资料、采访安排、媒体中心等。</p>
            <div class="media-services">
              <div class="service-item">
                <el-icon><Document /></el-icon>
                <span>新闻资料包</span>
              </div>
              <div class="service-item">
                <el-icon><Camera /></el-icon>
                <span>采访安排</span>
              </div>
              <div class="service-item">
                <el-icon><Location /></el-icon>
                <span>媒体中心</span>
              </div>
              <div class="service-item">
                <el-icon><Phone /></el-icon>
                <span>专属联络</span>
              </div>
            </div>
            <div class="registration-actions">
              <el-button type="primary" size="large" @click="$router.push('/media-registration')">
                <el-icon><Edit /></el-icon>
                媒体注册
              </el-button>
              <el-button size="large" @click="$router.push('/downloads')">
                <el-icon><Download /></el-icon>
                下载媒体资料
              </el-button>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { VideoPlay, View, Clock, Document, Camera, Location, Phone, Edit, Download } from '@element-plus/icons-vue'
import { homepageApi, subpageApi } from '@/api/user'
import { useRouter } from 'vue-router'

export default {
  name: 'MediaCenter',
  components: {
    VideoPlay,
    View,
    Clock,
    Document,
    Camera,
    Location,
    Phone,
    Edit,
    Download
  },
  setup() {
    const router = useRouter()
    
    // 当前激活的tab
    const activeTab = ref('exhibition-news')
    
    // 轮播图数据
    const carouselData = ref([])
    
    // 设置激活的tab
    const setActiveTab = (tabName) => {
      activeTab.value = tabName
    }
    
    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action) {
        console.log('轮播图按钮点击:', action)
      }
    }
    
    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType('carousel_media')
        if (response && response.code === '200' && response.data) {
          carouselData.value = response.data
            .filter(item => item.status === 'active')
            .map(item => {
              const content = typeof item.content === 'string' ? JSON.parse(item.content) : item.content
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || '',
                description: content.description || '',
                image: item.imageUrl || content.image || '',
                buttonText: content.buttonText || '',
                action: content.action || ''
              }
            })
            .sort((a, b) => a.sort - b.sort)
        }
      } catch (error) {
        console.error('加载轮播图数据失败:', error)
      }
    }
    
    // 页面数据
    const pageData = ref({})
    
    // 展会动态数据 - 从后端获取
    const exhibitionNews = ref([])

    // 媒体报道数据 - 从后端获取
    const mediaReports = ref([])

    // 行业资讯数据 - 从后端获取
    const industryNews = ref([])

    // 现场集锦数据 - 从后端获取
    const highlightsData = ref([])

    // 合作媒体数据 - 从后端获取
    const cooperativeMedia = ref([])


    // 解析富文本内容
    const parseContent = (content) => {
      if (!content) return { content: '', excerpt: '', image: '', date: '', category: '', source: '', link: '' }
      
      try {
        if (typeof content === 'string' && content.trim().startsWith('{')) {
          return JSON.parse(content)
        }
        return { content: content, excerpt: '', image: '', date: '', category: '', source: '', link: '' }
      } catch (e) {
        return { content: content, excerpt: '', image: '', date: '', category: '', source: '', link: '' }
      }
    }

    // 加载媒体中心页面数据
    const loadMediaData = async () => {
      try {
        // 加载展会动态数据
        const newsResponse = await subpageApi.getSubpageList('media', 'exhibition-news')
        if (newsResponse && newsResponse.code === '200' && newsResponse.data && newsResponse.data.length > 0) {
          exhibitionNews.value = newsResponse.data.map((item, index) => {
            const parsed = parseContent(item.content)
            return {
              id: item.id || index + 1,
              title: item.title || '',
              excerpt: parsed.excerpt || item.description || '',
              image: item.imageUrl || parsed.image || '',
              date: parsed.date || new Date().toLocaleDateString(),
              category: parsed.category || '展会资讯'
            }
          })
        } else {
          loadDefaultExhibitionNews()
        }

        // 加载媒体报道数据
        const reportsResponse = await subpageApi.getSubpageList('media', 'media-reports')
        if (reportsResponse && reportsResponse.code === '200' && reportsResponse.data && reportsResponse.data.length > 0) {
          mediaReports.value = reportsResponse.data.map((item, index) => {
            const parsed = parseContent(item.content)
            return {
              id: item.id || index + 1,
              title: item.title || '',
              source: parsed.source || '',
              excerpt: parsed.excerpt || item.description || '',
              image: item.imageUrl || parsed.image || '',
              link: parsed.link || '#'
            }
          })
        } else {
          loadDefaultMediaReports()
        }

        // 加载行业资讯数据
        const industryResponse = await subpageApi.getSubpageList('media', 'industry-news')
        if (industryResponse && industryResponse.code === '200' && industryResponse.data && industryResponse.data.length > 0) {
          industryNews.value = industryResponse.data.map((item, index) => {
            const parsed = parseContent(item.content)
            return {
              id: item.id || index + 1,
              title: item.title || '',
              excerpt: parsed.excerpt || item.description || '',
              image: item.imageUrl || parsed.image || '',
              date: parsed.date || new Date().toLocaleDateString(),
              category: parsed.category || '行业资讯'
            }
          })
        } else {
          loadDefaultIndustryNews()
        }

        // 加载现场集锦数据
        const highlightsResponse = await subpageApi.getSubpageList('media', 'on-site-highlights')
        if (highlightsResponse && highlightsResponse.code === '200' && highlightsResponse.data && highlightsResponse.data.length > 0) {
          highlightsData.value = highlightsResponse.data.map((item, index) => {
            const parsed = parseContent(item.content)
            return {
              id: item.id || index + 1,
              title: item.title || '',
              description: parsed.content || item.description || '',
              image: item.imageUrl || parsed.image || '',
              date: parsed.date || new Date().toLocaleDateString(),
              year: parsed.year || new Date().getFullYear().toString(),
              type: parsed.type || '展区巡展'
            }
          })
        } else {
          loadDefaultHighlights()
        }

        // 加载合作媒体数据
        const mediaResponse = await subpageApi.getSubpageList('media', 'cooperative-media')
        if (mediaResponse && mediaResponse.code === '200' && mediaResponse.data && mediaResponse.data.length > 0) {
          cooperativeMedia.value = mediaResponse.data.map((item, index) => {
            let parsed = {}
            try { 
              parsed = item.content ? (typeof item.content === 'string' ? JSON.parse(item.content) : item.content) : {} 
            } catch (e) {
              console.log('解析content失败:', e)
            }
            
            return {
              id: item.id || index + 1,
              name: parsed.subtitle || item.title || `合作媒体${index + 1}`,
              logo: parsed.backgroundImage || item.imageUrl || '',
              website: parsed.website || '#',
              description: parsed.content || item.content || ''
            }
          })
        } else {
          loadDefaultCooperativeMedia()
        }

      } catch (error) {
        console.error('加载媒体中心页面数据失败:', error)
        // 使用默认数据作为回退
        loadDefaultData()
      }
    }

    // 加载默认展会动态数据
    const loadDefaultExhibitionNews = () => {
      exhibitionNews.value = [
        {
          id: 1,
          title: '2025年展会筹备工作全面启动',
          excerpt: '2025年FAIR plus展会筹备工作已全面启动，预计规模将超过往年...',
          image: 'https://images.pexels.com/photos/3861969/pexels-photo-3861969.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-15',
          category: '展会动态'
        },
        {
          id: 2,
          title: '机器人产业技术创新论坛即将举办',
          excerpt: '展会同期将举办多场技术论坛，邀请行业专家分享最新技术趋势...',
          image: 'https://images.pexels.com/photos/3861971/pexels-photo-3861971.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-10',
          category: '活动预告'
        },
        {
          id: 3,
          title: '展位预订火热进行中',
          excerpt: '2025年展会展位预订工作正在火热进行中，优质展位数量有限...',
          image: 'https://images.pexels.com/photos/3861973/pexels-photo-3861973.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-05',
          category: '展商服务'
        }
      ]
    }

    // 加载默认媒体报道数据
    const loadDefaultMediaReports = () => {
      mediaReports.value = [
        {
          id: 1,
          title: '华南工博会：机器人产业发展的风向标',
          source: '科技日报',
          excerpt: '作为华南地区最大的机器人展会，FAIR plus已成为行业发展的风向标...',
          image: 'https://images.pexels.com/photos/3861975/pexels-photo-3861975.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          link: '#'
        },
        {
          id: 2,
          title: '2025年展会回顾：技术创新引领行业发展',
          source: '中国工业报',
          excerpt: '2025年展会成功举办，展示了机器人产业的最新发展成果...',
          image: 'https://images.pexels.com/photos/3861977/pexels-photo-3861977.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          link: '#'
        },
        {
          id: 3,
          title: '智能制造新趋势：协作机器人成为焦点',
          source: '机器人技术与应用',
          excerpt: '本届展会特别关注协作机器人技术，展示了人机协作的新可能...',
          image: 'https://images.pexels.com/photos/3861982/pexels-photo-3861982.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          link: '#'
        }
      ]
    }

    // 加载默认行业资讯数据
    const loadDefaultIndustryNews = () => {
      industryNews.value = [
        {
          id: 1,
          title: '机器人产业政策解读：支持力度持续加大',
          excerpt: '国家最新发布的机器人产业发展政策，为行业提供了新的发展机遇...',
          image: 'https://images.pexels.com/photos/3861985/pexels-photo-3861985.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-12',
          category: '政策解读'
        },
        {
          id: 2,
          title: '人工智能与机器人融合发展趋势',
          excerpt: 'AI技术的快速发展为机器人产业带来了新的机遇和挑战...',
          image: 'https://images.pexels.com/photos/3861987/pexels-photo-3861987.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-08',
          category: '技术趋势'
        },
        {
          id: 3,
          title: '工业4.0时代的机器人应用',
          excerpt: '在工业4.0时代，机器人将在智能制造中发挥更加重要的作用...',
          image: 'https://images.pexels.com/photos/3861989/pexels-photo-3861989.jpeg?auto=compress&cs=tinysrgb&w=400&h=250&fit=crop&crop=center',
          date: '2025-12-03',
          category: '应用案例'
        }
      ]
    }

    // 加载默认现场集锦数据
    const loadDefaultHighlights = () => {
      highlightsData.value = [
        {
          id: 1,
          title: '开幕式盛况',
          image: 'https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop',
          year: '2025',
          type: '开幕式',
          description: '2025年展会开幕式现场盛况',
          date: '2025-03-15'
        },
        {
          id: 2,
          title: '展区巡展',
          image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop',
          year: '2025',
          type: '展区巡展',
          description: '展区精彩巡展活动',
          date: '2025-03-16'
        },
        {
          id: 3,
          title: '论坛活动',
          image: 'https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop',
          year: '2025',
          type: '论坛活动',
          description: '行业论坛精彩瞬间',
          date: '2025-03-17'
        },
        {
          id: 4,
          title: '商务洽谈',
          image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop',
          year: '2025',
          type: '商务洽谈',
          description: '展商商务洽谈现场',
          date: '2025-03-18'
        }
      ]
    }

    // 加载默认合作媒体数据
    const loadDefaultCooperativeMedia = () => {
      cooperativeMedia.value = [
        {
          id: 1,
          name: '科技日报',
          logo: 'https://images.pexels.com/photos/3861995/pexels-photo-3861995.jpeg?auto=compress&cs=tinysrgb&w=200&h=100&fit=crop&crop=center',
          description: '国家级科技类报纸'
        },
        {
          id: 2,
          name: '中国工业报',
          logo: 'https://images.pexels.com/photos/3861997/pexels-photo-3861997.jpeg?auto=compress&cs=tinysrgb&w=200&h=100&fit=crop&crop=center',
          description: '工业领域权威媒体'
        }
      ]
    }

    // 加载默认数据
    const loadDefaultData = () => {
      loadDefaultExhibitionNews()
      loadDefaultMediaReports()
      loadDefaultIndustryNews()
      loadDefaultHighlights()
      loadDefaultCooperativeMedia()
    }

    // 播放视频
    const playVideo = (highlight) => {
      ElMessage.success(`正在播放: ${highlight.title}`)
      // 这里可以打开视频播放器或跳转到视频页面
      window.open(highlight.videoUrl, '_blank')
    }

    // 查看新闻详情（跳转到详情页面）
    const viewNewsDetail = (newsId) => {
      // 跳转到新闻详情页面，传递新闻ID作为参数
      router.push({
        path: '/news-detail',
        query: { id: newsId }
      })
    }
    
    // 组件挂载时加载数据
    onMounted(() => {
      loadMediaData()
      loadCarouselData()
    })

    return {
      activeTab,
      setActiveTab,
      carouselData,
      handleCarouselAction,
      pageData,
      exhibitionNews,
      mediaReports,
      industryNews,
      highlightsData,
      cooperativeMedia,
      playVideo,
      viewNewsDetail
    }
  }
}
</script>

<style scoped>
.media-center {
  padding-top: 70px;
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部静态图片样式 */
.static-banner { margin-top: 0; }
.banner-item { position: relative; height: 400px; overflow: hidden; }
.banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); padding-top: 130px; }
.banner-content { text-align: left; color: #fff; max-width: 100%; }
.banner-title { font-size: 48px; font-weight: bold; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.banner-subtitle { font-size: 24px; margin-bottom: 15px; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.banner-description { font-size: 18px; margin-bottom: 30px; opacity: 0.8; line-height: 1.6; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.media-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.media-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 展会资讯样式 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.news-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.news-image {
  height: 350px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-content {
  padding: 20px;
}

.news-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.news-excerpt {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #999;
  margin-bottom: 15px;
}

.news-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

/* 媒体报道样式 */
.media-reports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.report-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.report-card:hover {
  transform: translateY(-5px);
}

.report-image {
  height: 350px;
  overflow: hidden;
}

.report-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-content {
  padding: 20px;
}

.report-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.report-source {
  color: #667eea;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.report-excerpt {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.report-link {
  color: #667eea;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}

.report-link:hover {
  text-decoration: underline;
}

/* 行业资讯样式 */
.industry-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.news-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.news-item:hover {
  transform: translateY(-5px);
}

/* 现场集锦样式 */
.highlights-filters {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}

.highlight-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
}

.highlight-image {
  position: relative;
  height: 350px;
  overflow: hidden;
}

.highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.highlight-card:hover .highlight-image img {
  transform: scale(1.05);
}

.highlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.highlight-card:hover .highlight-overlay {
  opacity: 1;
}

.highlight-content {
  padding: 20px;
}

.highlight-meta {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.highlight-date,
.highlight-type {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
}

.highlight-title {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
  line-height: 1.4;
}

.highlight-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* 富文本内图片限制（媒体中心各区块） */
.highlight-description :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

.highlight-stats {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
}

.highlight-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 合作媒体样式 */
.cooperative-media {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
}

.media-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.media-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 图片在上 */
.media-image-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
}

.media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.media-item:hover .media-image {
  transform: scale(1.05);
}

/* 文本在下 */
.media-content {
  padding: 20px;
}

.media-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.media-description {
  color: #666;
  line-height: 1.6;
  font-size: 0.95rem;
}

/* 富文本内图片样式 */
.media-description :deep(img) {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  overflow: hidden;
  border-radius: 6px;
  margin: 0.5rem 0;
}

/* 媒体注册样式 */
.media-registration {
  max-width: 600px;
  margin: 0 auto;
}

.registration-form {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #667eea;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  width: auto;
}

.submit-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.3s ease;
  width: 100%;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .media-section {
    padding: 20px;
  }
  
  .news-grid,
  .media-reports,
  .industry-news,
  .highlights-grid {
    grid-template-columns: 1fr;
  }
  
  .cooperative-media {
    gap: 1rem;
  }
  
  .media-item {
    margin-bottom: 1rem;
  }
  
  .media-image-section {
    height: 150px;
  }
  
  .media-content {
    padding: 15px;
  }
  
  .media-title {
    font-size: 1.1rem;
  }
  
  .highlights-filters {
    flex-direction: column;
  }
}
</style> 